<template>
  <image
    v-if="!isError && imgPath"
    :src="imgPath"
    :style="imgStyle"
    :class="classList"
    :mode="imgMode"
    @error="imgError"
    @load="imgLoad"
    @tap="handleTap"
  />
  <image
    v-else
    :src="defaultImgPath"
    :style="imgStyle"
    :class="classList"
    @tap="handleTap"
  />
</template>

<script setup>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    imgMode: {
      type: String,
      default: 'scaleToFill'
    },
    classList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    imgStyle: {
      type: Object,
      default: function() {
        return {};
      }
    },
    defaultImgType: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{

        isError:false,
    }
  },
  computed:{
    imgPath(){
      return this.src;
    },
    defaultImgPath(){
      if (this.defaultImgType) {
        return '/static/images/icon/head04.png'
      }
      return '/static/images/icon/def.png'
    }
  },
  methods:{
    imgError(){
      this.isError= true;
      this.$emit('imgError')
    },
    imgLoad(e){
      this.$emit('imgLoad', e)
    },
    handleTap(){
      this.$emit('handleTap')
    }
  }
}
</script>

<style scoped>
image {
  width: 100%;
  height: 100%;
}
</style>
